<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="合伙人编号">
                  <el-input
                    v-model="searchModel.partnerId"
                    placeholder="合伙人编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结算状态">
                  <el-radio-group
                    @change="search"
                    v-model="searchModel.settled"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button :label="false">待结算</el-radio-button>
                    <el-radio-button :label="true">已结算</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="笔数">
                  <div style="display:flex;">
                    <el-input
                      v-model="searchModel.minSuccessCount"
                      placeholder="最少笔数"
                    />
                    ~
                    <el-input
                      v-model="searchModel.maxSuccessCount"
                      placeholder="最大笔数"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="searchModel.day"
                    type="date"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format='yyyy-MM-dd'
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="small"
              style="width: 100%;"
            >
              <el-table-column
                prop="day"
                label="日期"
              >
              </el-table-column>
               <el-table-column label="合伙人编号">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    {{ scope.row.partnerId }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="转账客户数">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    {{ scope.row.transUserCount }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="客户转账金额">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    {{ scope.row.successAmount }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="客户转账笔数">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    {{ scope.row.successCount }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="合伙人收益">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    ¥ {{ scope.row.benefit / 100 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="结算状态">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.settled"
                    class="text-success"
                  >已结算</span>
                  <span
                    v-if="!scope.row.settled"
                    class="text-info"
                  >待结算</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchModel.count"
              >
              </el-pagination>
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
</template>


<script>
import { searchPartnerSettleRecord } from "@/api/business";
const defaultModel = {
  settled: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
  minSuccessCount: 1,
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: null,
    };
  },
  components: {},
  methods: {
    search() {
      this.getList(1);
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }

      let searchModel = _.cloneDeep(this.searchModel);
      searchPartnerSettleRecord(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;

      return searchModel;
    },
    //修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.getList(1);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>

</style>
